<template>
  <div class="container">
    <div class="view">
      <div class="list" ref="list">
        <div class="item" v-for="(item, index) in orderList" :key="index">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef, onMounted } from "vue"
const orderList = ref<Array<string>>([])
const list = shallowRef<HTMLDivElement>()

function createData(num: number) {
  for (let i = 0; i < num; i++) {
    orderList.value.push(`user${i + 1}获得了一台华为手机`)
  }
}
createData(200)
let index = 0
let timer
function animate() {
  index++
  if (index + 3 == orderList.value.length) {
    clearInterval(timer)
  } else {
    list.value.style.transform = `translateY(-${30 * index}px)`
  }
}
onMounted(() => {
  timer = setInterval(animate, 1500)
  document.onvisibilitychange = () => {
    if (document.visibilityState == "visible") {
      timer = setInterval(animate, 1500)
    } else {
      clearInterval(timer)
    }
  }
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--BlockBgColor);
  box-sizing: border-box;
  padding-top: 10px;
  transition: background 0.3s var(--n-bezier);
  font-size: 50px;
  color: var(--TextColor);
  @include center;
  .view {
    width: 300px;
    height: 90px;
    box-sizing: border-box;
    // border: 1px solid;
    overflow: hidden;
    .list {
      width: 100%;
      transition: all 1s var(--n-bezier);
      .item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        text-align: center;
      }
    }
  }
}
</style>
